// JavaScript Document
((function(a){

	//$Q.debug("aaaaaaaaaa");
	//视频播放的资源体信息
	var source = function(opts){
		var ths = this;
		 this.opts = $Q.optionsInput(opts,{url:'',type:'',video:null,top:null,onloaded:null},'url');
		 this.url = this.opts.url;
		 this.type = this.opts.type;
		 this.video = this.opts.video;
		 this.top = this.opts.top;
		 this.onloaded = null;//是否加载成功的处理
		 
		 //资源执行播放
		 this.__initialize = function(){
		 	try{
                //判定是否有type字段，没有的话尝试从链接中自动获取type
                if(!this.type) {
                    if(/\.m3u8$/.test(this.url)){
                        this.type = 'm3u8';
                        if(a.Hls.isSupported()){
                            //$Q.alert("暂不支持视频播放5");
                            //m3u8播放
                            var hls = new Hls();
                            hls.loadSource(this.url);
                            hls.attachMedia(this.video);
                            hls.on(Hls.Events.MANIFEST_PARSED,function() {
                                //ths.top.play();
								ths.onloaded&&ths.onloaded();
                                //可以播放
                            });

                        }else if(this.video.canPlayType('application/vnd.apple.mpegurl')){
                            this.video.src = this.url;
                            //$Q.debug(this);
                            this.video.addEventListener('loadedmetadata',function() {
								ths.onloaded&&ths.onloaded();
                                //ths.top.play();
                                //$Q.alert("2222222221");
                                //可以播放
                            });
                        }else{
                            a.kuoqiJs.error("暂不支持视频播放3");
                        }
                    }else{
                        a.kuoqiJs.error("暂不支持的视频播放2");
                    }
                }else{
                    a.kuoqiJs.error('暂不支持'+this.type+'视频播放1');
                }
			}catch(err){
		 		a.kuoqiJs.error("source init error with" + err.toString());
			}
		 }
		 this.__initialize();
	}
	
	
	//插件本体
	var video = function(opts){
		var ths = this;
		this.opts = null;
		this.format = {};
		this.canplay = 0;//是否可以播放，0:不可以播放，1：可以播放
		this.isplay = 0;//0：播放未开始，1：播放中，2：播放暂停，3：播放完成，4:播放缓存中
		this.timer = 0;//时间计时器
		this.currentTime = 0;//当前时间进度信息
		this.duration = 0;//总的时间进度信息
		this.source = null;//播放的资源信息
		this.onInited = null;//初始化时触发
		this.onPlay = null;//播放开始时触发
		this.onEnd = null;//播放完成时触发
		this.isReset = true;//是否重写
		//设置当前播放
		 this.setCurrent = function(code){
			 this.video.currentTime = parseFloat(code);
		 }
		this.createUI = function(){
			this.format.card = $Q('<div style="position:relative;width:100%;height:100%;overflow: hidden;"></div>');
			//controls="controls"
			this.video = $Q('<video x5-playsinline="" playsinline="" webkit-playsinline="" x-webkit-airplay="allow" preload="true" x-webkit-airplay="allow" style="width: 100%;height: 100%;background-color: #000;"></video>').first(true);

			this.format.cover = $Q('<div style="position: absolute;align-items: center;top: 0;bottom: 0;left: 0;right: 0;display: flex;justify-content: center;"></div>');
			
			//控制模块的模块容器
			this.format.cpanelbbar = $Q('<div data-cpanelbbar style="position: absolute;bottom: 0;left: 0;right: 0;    background-color: rgba(0, 0, 0, 0.4);padding: 1em 1em 0.25rem 1em;background-image: linear-gradient( to top, #000, #00000087,#00000042, #0000);transition: 0.5s;"></div>'); 
			
			//进度条部分的控制
			this.format.proccbox = $Q('<div style="position: relative;align-items: center;top: 0;bottom: 0;left: 0;right: 0;display: flex;justify-content: center;"></div>'); 
			
			//时间显示控制
			this.format.timer = $Q('<div style="position: relative;color: #fff;padding-left: 0.25em;padding-right: 0.25em;">00:00</div>');
			
			//控制模块的控制部分
			this.format.ctls = $Q('<div style="position: relative;width: 100%;bottom: 0;display: flex;    align-items: center;padding-top: 0.5rem;"><div data-format="playbox"></div><div style="flex: auto;"></div><div data-format="timer"></div><div data-format="voicebox"></div><div data-format="screenbox"></div></div>');
			this.format.stopbtn = $Q('<div style="color:#fff;margin:0.25em;"><i style="font-size: 1.5rem;" class="icon icon-mediastop"></i></div>');//停止按钮
			this.format.playbtn = $Q('<div style="color:#fff;margin:0.25em;"><i style="font-size: 1.5rem;" class="icon icon-mediaplay"></i></div>');//播放按钮
			this.format.pausebtn = $Q('<div style="color:#fff;margin:0.25em;"><i style="font-size: 1.5rem;" class="icon icon-mediapause"></i></div>');//暂停按钮
			this.format.screenbtn = $Q('<div style="color:#fff;margin:0.25em;"><i style="font-size: 1.5rem;" class="icon icon-mediafullscreen"></i></div>');//全屏按钮
			this.format.unscreenbtn = $Q('<div style="color:#fff;margin:0.25em;"><i style="font-size: 1.5rem;" class="icon icon-mediaquitfullscreen"></i></div>');//取消全屏按钮
			this.format.voicebtn = $Q('<div style="color:#fff;margin:0.25em;"><i style="font-size: 1.5rem;" class="icon icon-mediavoice"></i></div>');//声音按钮
			
			this.format.process = $Q('<div style="height: 3px;background-color: #fff;position: relative;width: 100%;"></div>');
			this.format.processbar = $Q('<div style="position: absolute;height: 100%;width: 1%;    background-color: #FF5722;"></div>');
			
			this.format.stopbigbtn = $Q('<div style="color:#fff;margin:0.25em;"><i style="font-size: 4rem;" class="icon icon-mediastop"></i></div>');//停止按钮
			this.format.playbigbtn = $Q('<div style="color:#fff;margin:0.25em;"><i style="font-size: 4rem;" class="icon icon-mediaplay"></i></div>');//播放按钮
			this.format.pausebigbtn = $Q('<div style="color:#fff;margin:0.25em;"><i style="font-size: 4rem;" class="icon icon-mediapause"></i></div>');//暂停按钮
			
			this.format.boxElement = $Q(opts.box);
			$Q(this.format.card).empty();
			$Q(this.format.card).append($Q(this.video));
			$Q(this.format.card).append(this.format.cover);
			$Q(this.format.card).append(this.format.cpanelbbar);
			
			$Q(this.format.cpanelbbar).append(this.format.proccbox);
			$Q(this.format.cpanelbbar).append(this.format.ctls);
			
			//写入播放按钮
			//首先展示不放停止按钮，等资源加载完成之后进行一个播放按钮的展示
			$Q(this.format.ctls).find('[data-format="playbox"]').html(this.format.stopbtn);
			//$Q(this.format.ctls).find('[data-format="playbox"]').append(this.format.stopbtn);
			//$Q(this.format.ctls).find('[data-format="playbox"]').append(this.format.playbtn);
			//$Q(this.format.ctls).find('[data-format="playbox"]').append(this.format.pausebtn);
			$Q(this.format.ctls).find('[data-format="screenbox"]').append(this.format.screenbtn);
			//$Q(this.format.ctls).find('[data-format="screenbox"]').append(this.format.unscreenbtn);
			//声音控制
			//$Q(this.format.ctls).find('[data-format="voicebox"]').append(this.format.voicebtn);
			$Q(this.format.ctls).find('[data-format="timer"]').append(this.format.timer);
			
			//进度条的部分
			$Q(this.format.process).append(this.format.processbar);
			$Q(this.format.proccbox).html(this.format.process);
			
			
			
			$Q(this.format.boxElement).css({
				"position":"relative"	
			});
			this.format.boxElement.html(this.format.card);
			//this.syncUI();
		}
		
		//创建苹果手机UI
		this.createIsoUI = function(){
			this.isReset = false;//非重置模块
			this.format.card = $Q('<div style="position:relative;width:100%;height:100%;overflow: hidden;"></div>');
			//controls="controls"
			this.video = $Q('<video controls="controls" x5-playsinline="" playsinline="" webkit-playsinline="" x-webkit-airplay="allow" preload="true" x-webkit-airplay="allow" style="width: 100%;height: 100%;background-color: #000;"></video>').first(true);

			this.format.boxElement = $Q(opts.box);
			$Q(this.format.card).empty();
			$Q(this.format.card).append($Q(this.video));

			$Q(this.format.boxElement).css({
				"position":"relative"	
			});
			this.format.boxElement.html(this.format.card);
		}
		
		//异步相关信息
		this.syncFunction = function(){
			var ths = this;
			//停止播放按钮
            $Q(this.format.stopbtn).on('click',function(){

            });
			//播放按钮的点击，当然是播放啦
			$Q(this.format.playbtn).on('click',function(){
				ths.play();
				//判定是否在播放中
			});
			//暂停按钮的点击的播放
			$Q(this.format.pausebtn).on('click',function(){
				ths.pause();
			});
			
			$Q(this.format.cover).on('click',function(){
				if(ths.canplay){
					if(ths.isplay==1){
						//播放中，暂停	
						$Q(ths.format.pausebtn).click();
					}else{
						//其他状态播放
						$Q(ths.format.playbtn).click();
					}
				}else{
					//暂时不可播放,尝试点击停止按钮的信息
					ths.opts.onloaded = function(){
						ths.play();	
					}
					ths.preload(ths.opts);
				}
			});

			//全屏按钮
			$Q(this.format.screenbtn).on('click',function(){
				$Q(ths.format.boxElement).fullScreen(function(){
					ths.syncUI();//同步UI界面的信
				});
				
			});
			//取消全屏按钮
			$Q(this.format.unscreenbtn).on('click',function(){
				$Q.quitFullscreen(function(){
					ths.syncUI();//同步UI界面的信
				});
			});
		}
		
		//关于监听的相关信息
		this.listenFunction = function(){
			var ths = this;
			//监听进度信息
			this.video.onprogress = function(){
				//console.log(122);	
			}
			this.video.ontimeupdate = function(){
				ths.currentTime = this.currentTime;
				ths.duration = this.duration;
				if(!ths.isReset){ return;}
				w = this.currentTime / this.duration * 100;
				ths.format.processbar.css("width",w + "%");
				ths.format.timer.html( $Q.timeformat(this.currentTime) + "/" + $Q.timeformat(this.duration));
				//console.log('当媒介改变其播放位置时运行脚本');
			}			
			
			//当媒介数据暂停时运行脚本
			this.video.onpause = function(){
				ths.isplay  = 2;
				ths.syncUI();//同步UI界面的信
			}
			
			//当媒介数据将要开始播放时运行脚本
			this.video.onplay = function(){
			}
			
			//当媒介数据已开始播放时运行脚本
			this.video.onplaying = function(){
				ths.isplay  = 1;
				ths.syncUI();//同步UI界面的信
				ths.onPlay&&ths.onPlay(this);
			}
			
			//当媒介能够开始播放但可能因缓冲而需要停止时运行脚本
			this.video.oncanplay = function(){
				ths.canplay = 1;//切换到可以播放
				this.isplay = 0;//切换到未播放
				ths.syncUI();//同步UI界面的信息
			}
			//当媒介能够无需因缓冲而停止即可播放至结尾时运行脚本
			this.video.oncanplaythrough = function(){
				ths.canplay = 1;//切换到可以播放
				this.isplay = 0;//切换到未播放
				ths.syncUI();//同步UI界面的信息
			}
			
			//播放结束执行
			this.video.onended = function(){
				ths.onEnd&&ths.onEnd(this);	
			}
		}
		
		//滞后
		this.syncTimerUI = function(){
			//隐藏UI信息
			$Q(this.format.cpanelbbar).css("bottom","-4rem");
		}
		
		//根据参数信息同步UI信息
		this.syncUI = function(){
			var ths = this;
			if(ths.timer){
				clearTimeout(ths.timer);
				ths.timer = 0;
			}
			$Q(this.format.cpanelbbar).css("bottom","0");
			
			//0：播放未开始，1：播放中，2：播放暂停，3：播放完成，4:播放缓存中
			if(this.canplay){
				//可以播放
				
				//如果是播放中的情况，展示暂停按钮
				if(this.isplay == 1){
					//播放中-展示暂停按钮
					$Q(this.format.ctls).find('[data-format="playbox"]').html(this.format.pausebtn);
					//$Q(this.format.cover).html(this.format.pausebigbtn);
				}else if(this.isplay == 2){
					//这是播放暂停的情况，展示播放的按钮
					$Q(this.format.ctls).find('[data-format="playbox"]').html(this.format.playbtn);
					//$Q(this.format.cover).html(this.format.playbigbtn);
				}else{
					//不在播放中，展示播放安阿牛
					$Q(this.format.ctls).find('[data-format="playbox"]').html(this.format.playbtn);
					//$Q(this.format.cover).html(this.format.playbigbtn);
				}
			}else{
				//不可以播放
				//展示停止按钮
				$Q(this.format.ctls).find('[data-format="playbox"]').html(this.format.stopbtn);
				//$Q(this.format.cover).html(this.format.stopbigbtn);
			}
			//判定是否全屏，并变更全屏按钮信息
			if($Q.isFullscreen()){
				//是全屏
				$Q(this.format.ctls).find('[data-format="screenbox"]').html(this.format.unscreenbtn);
				//全屏状态下的移动设备情况下，两边会预留一部分的屏幕设备
				if($Q.isMobile){
					$Q(this.format.cpanelbbar).css("padding","1em 2em 0.25rem 2em");
				}else{
					$Q(this.format.cpanelbbar).css("padding","1em 1em 0.25rem 1em");
				}
			}else{
				//不是全屏
				$Q(this.format.ctls).find('[data-format="screenbox"]').html(this.format.screenbtn);
				//$Q(this.format.ctls).firstChild().css("width","2.5%");
				$Q(this.format.cpanelbbar).css("padding","1em 1em 0.25rem 1em");
			}
			
			//滞后一段时间之后进行一个操作
			this.timer = setTimeout(function(){
				ths.syncTimerUI();
				},2500);
			
		}
		
		//视频预加载
		this.preload  = function(opts){
			this.opts = $Q.optionsInput(opts,{url:'',type:'',video:this.video,top:this},'url');
			this.source = new source(this.opts);
			this.syncFunction();//重置方法信息
			this.listenFunction();//监听方法列表
		}
		
		//播放功能
		this.play = function(){ this.video.play();}
		
		//播放暂停
		this.pause = function(){this.video.pause();}
		
		this.ready = function(){
			if($Q.isIos()){
				this.createIsoUI();
			}else{
				this.createUI();	
			}
		}
		
		this.ready();
	}
	
	a.kuoqiJs.plugIn.register('video',video);
})(this))